/**
 * 学习目标：React事件中this的指向问题，解决方案
 * 原理：箭头函数，根据所在的环境自动绑定this
 * 方案1：class箭头函数方法 - 推荐 👍
 * 方案2：render中使用箭头函数
 * 方案3：bind修改this指向
 */
import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
  state = {
    msg: 'react',
  };

  // React非自带结构体，this默认指向undefined
  // 方案1：class箭头函数方法 - 推荐
  handleClick = () => {
    console.log('handleClick中的this -----> ', this.state);
  };
  // React自带结构体中，this指向正确: React源码内部处理过
  render() {
    console.log('render中的this -----> ', this.state);
    return (
      <>
        <button onClick={this.handleClick}>点我获取state的数据</button>
      </>
    );
  }
}

ReactDOM.render(<App></App>, document.getElementById('root'));
